<template>
  <div class="card" :style="{ borderColor: row.color }">
    <div class="card-left">
      <div class="name">{{ row.name }}</div>
      <div class="detail">{{ row.data }}</div>
    </div>
    <div class="card-right">
      <i :class="row.icon"></i>
    </div>
  </div>
</template>

<script setup>
defineProps({ row: { type: Object, default: () => ({}) } });
defineOptions({ name: 'AdminCardRow' });
</script>

<style scoped>
.card { border-radius:4px; overflow:hidden; border-left:6px solid; height:96px; display:inline-flex; align-items:center; justify-content:space-between; width:calc(25% - 26px); background-color:#fff; margin:10px; box-shadow:3px 3px 10px 0 rgba(58,59,69,0.15); }
.card-left { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-left:20px; }
.card-left .name { line-height:18px; color:#666; font-size:16px; margin-bottom:14px; }
.card-left .detail { font-size:20px; font-weight:bold; color:#333; }
.card-right { padding-right:15px; }
.card-right i { font-size:40px; font-weight:900; color:#e6e8ef; }
@media screen and (max-width:1200px){ .card{ width:calc(50% - 26px);} }
@media screen and (max-width:500px){ .card{ width:calc(100% - 26px);} }
</style>


















